<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通讯录首页</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css" />

    <!-- mescroll -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>
<style>
    .tabbar {
        background: unset;
        padding: unset;
    }

    .tabbar button {
        border-radius: unset;
        height: 50px;
        width: 100%;
        padding: 12px;
    }
</style>

<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" id="search" placeholder="请输入搜索关键字" />

            <button class="btn" size="mini" type="default">搜索</button>
        </div>
    </div>

    <div class="type wow fadeInUp"></div>

    <!-- 列表 -->
    <div id="type" class="contact wow fadeInUp mescroll" data-wow-delay="100ms">
        <div class="list"></div>
    </div>

    <!-- 底部 -->
    <div class="tabbar">
        <button onclick="location.href = 'TypeAdd.html'" class="mui-btn mui-btn-primary">
            添加通讯录分类
        </button>
    </div>
</body>

</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- mescroll -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/axios/axios.min.js"></script>

<!-- 服务请求 -->
<script src="./assets/plugins/axios/request.js"></script>

<!-- cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- helpers -->
<script src="./assets/plugins/helpers.js"></script>

<script>
    // 实例化wow.js
    new WOW().init();

    // 登录信息
    let business = cookie.get('business')
        ? JSON.parse(cookie.get('business'))
        : {};

    // 关键字
    let search = '';

    (async () => {
        await check(true, true);
    })();

    // 实例化插件
    let meScroll = new MeScroll('type', {
        // 下拉刷新
        down: {
            auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
            callback: downCallback, // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        // 上拉加载
        up: {
            auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
            isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
            toTop: {
                //配置回到顶部按钮
                duration: 600,
                src: './assets/images/mescroll-totop.png', //默认滚动到1000px显示,可配置offset修改
                offset: 100,
            },
        },
    });

    // 下拉刷新回调函数
    async function downCallback() {
        // 重置当前页为1，同时自动触发上拉加载回调函数
        meScroll.resetUpScroll();

        // 把列表清空
        $('#type .list').empty();
    }

    // 上拉加载回调函数
    async function UpCallback(page) {
        // 组装数据
        let params = {
            page: page.num, // 当前页
            limit: page.size, // 每页显示多少条数据
            businessid: business.id, // 用户id
            search, // 关键字
        };

        // 发起请求
        let result = await POST({
            url: '/card/type/index',
            params,
        });

        if (result.code === 1) {
            let list = result.data ? result.data.list : [];
            let count = result.data ? result.data.count : 0;

            meScroll.endBySize(list.length, count);

            fetchList(list);
        } else {
            mui.toast(result.msg, { duration: 1500 });

            // 结束加载状态
            meScroll.endBySize(0, 0);

            return false;
        }
    }

    function fetchList(list = []) {
        if (list.length > 0) {
            let temp = '';

            for (let item of list) {
                temp = `
                    <div class="item">
                        <div class="content">
                            <h3 class="title">
                                <a>${item.name}</a>
                            </h3>
                        </div>

                        <div class="operation">
                            <button class="mui-btn mui-btn-primary" onclick="onEdit(${item.id})">编辑</button>
                            <button class="mui-btn mui-btn-danger del" data-id="${item.id}" data-name="${item.name}">删除</button>
                        </div>
                    </div>
                `;

                $('#type .list').append(temp);
            }
        }
    }

    // 搜索关键字
    $('.search .btn').click(function () {
        search = $.trim($('#search').val());

        downCallback();
    });

    // 编辑
    function onEdit(id) {
        location.href = 'TypeEdit.html?id=' + id;
    }

    //删除
    $('#type .list').on('click', '.del', function () {
        let id = $(this).data('id');

        let name = $(this).data('name');

        // 点击元素获取它最顶级元素的位置
        let index = $(this).parents('.item').index();

        mui.confirm(`是否确认删除${name}?`, '删除', async function (res) {
            if (res.index === 1) {
                let result = await POST({
                    url: '/card/type/del',
                    params: {
                        businessid: business.id,
                        typeid: id,
                    },
                });

                if (result.code === 1) {
                    mui.toast(result.msg, { duration: 1500 });

                    // 根据位置删除相应节点
                    $('#type .list .item').eq(index).remove();

                    return false;
                }
            } else {
                mui.toast(result.msg, { duration: 1500 });

                return false;
            }
        });
    });
</script>